<template>
    <div class="p1-container" :style="{width:width}">
        <h2>
            Contrasting Temporal Fundraising Progress of the Current Campaign with
            Other {{currentCampainCategory}} Campaigns
        </h2>
        <div class="chart-container">
            <div class="chart-div">
                <div
                        :class="className"
                        class="show-container"
                        :id="id"
                        :style="{ height: height, width: '100%' }"
                ></div>
                <p class="x-label">Percentile Timing</p>
                <p class="y-label">Percentile Fundraising Progress</p>
            </div>
            <div class="legend">
                <div class="single-item">
                    <i>
                        <svg
                                t="1578836809816"
                                class="icon"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="1529"
                                width="32"
                                height="32"
                        >
                            <path
                                    d="M505.1 470.3m-391.7 0a391.7 391.7 0 1 0 783.4 0 391.7 391.7 0 1 0-783.4 0Z"
                                    fill="#d81e06"
                                    p-id="1530"
                            />
                            <path
                                    d="M505.1 890C273.7 890 85.4 701.7 85.4 470.3S273.7 50.6 505.1 50.6s419.7 188.3 419.7 419.7S736.5 890 505.1 890z m0-783.4c-200.6 0-363.7 163.2-363.7 363.7S304.5 834 505.1 834s363.7-163.2 363.7-363.7-163.1-363.7-363.7-363.7z"
                                    fill="#d81e06"
                                    p-id="1531"
                            />
                        </svg>
                    </i>
                    Temporal progress of this campaign that was lower/equal than the
                    average progress of other successful {{currentCampainCategory}} campaigns
                </div>
                <div class="single-item">
                    <i>
                        <svg
                                t="1578836809816"
                                class="icon"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="1529"
                                width="32"
                                height="32"
                        >
                            <path
                                    d="M505.1 470.3m-391.7 0a391.7 391.7 0 1 0 783.4 0 391.7 391.7 0 1 0-783.4 0Z"
                                    fill="#80e006"
                                    p-id="1530"
                            />
                            <path
                                    d="M505.1 890C273.7 890 85.4 701.7 85.4 470.3S273.7 50.6 505.1 50.6s419.7 188.3 419.7 419.7S736.5 890 505.1 890z m0-783.4c-200.6 0-363.7 163.2-363.7 363.7S304.5 834 505.1 834s363.7-163.2 363.7-363.7-163.1-363.7-363.7-363.7z"
                                    fill="#80e006"
                                    p-id="1531"
                            />
                        </svg>
                    </i>
                    Temporal progress of this campaign that was higher than the average
                    progress of other successful {{currentCampainCategory}} campaigns
                </div>
                <div class="single-item">
                    <i>
                        <svg
                                t="1578836975033"
                                class="icon"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="2261"
                                width="32"
                                height="32"
                        >
                            <path
                                    d="M958.733019 411.348626 659.258367 353.59527 511.998465 85.535095 364.741633 353.59527 65.265958 411.348626 273.72878 634.744555 235.88794 938.463881 511.998465 808.479435 788.091594 938.463881 750.250754 634.744555Z"
                                    p-id="2262"
                            />
                        </svg>
                    </i>
                    Current progress of this campaign
                </div>
                <div class="single-item">
                    <i>
                        <svg
                                t="1577963946479"
                                class="icon"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="3654"
                                width="32"
                                height="32"
                        >
                            <path
                                    d="M904 476H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"
                                    p-id="3655"
                                    fill="gray"
                            />
                        </svg>
                    </i>
                    Current Investment trends
                </div>
                <div class="single-item">
                    <i>
                        <svg
                                t="1577964108546"
                                class="icon"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="5227"
                                width="32"
                                height="32"
                        >
                            <path
                                    d="M934.4 490.666667h-51.2a25.6 25.6 0 1 0 0 51.2h51.2a25.6 25.6 0 1 0 0-51.2zM115.2 490.666667h-34.133333a25.6 25.6 0 1 0 0 51.2h34.133333a25.6 25.6 0 1 0 0-51.2zM388.266667 490.666667h-51.2a25.6 25.6 0 1 0 0 51.2h51.2a25.6 25.6 0 1 0 0-51.2zM251.733333 490.666667h-51.2a25.6 25.6 0 1 0 0 51.2h51.2a25.6 25.6 0 1 0 0-51.2zM524.8 490.666667h-51.2a25.6 25.6 0 1 0 0 51.2h51.2a25.6 25.6 0 1 0 0-51.2zM797.866667 490.666667h-51.2a25.6 25.6 0 1 0 0 51.2h51.2a25.6 25.6 0 1 0 0-51.2zM661.333333 490.666667h-51.2a25.6 25.6 0 1 0 0 51.2h51.2a25.6 25.6 0 1 0 0-51.2z"
                                    p-id="5228"
                                    fill="#bfbfbf"
                            />
                        </svg>
                    </i>
                    Minimal required investment trend if this campaign can be just-funded
                </div>
                <div class="single-item">
                    <i>
                        <div class="custom-tip"></div>
                    </i>
                    Graded distribution of the fundraising progresses of all the
                    successful {{currentCampainCategory}} campaigns
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import echarts from "echarts";
    import {feature1BarJson, feature1LineJson} from "@/api/feature";
    import {mapState, mapMutations} from "vuex";

    export default {
        props: {
            className: {
                type: String,
                default: "chart"
            },
            id: {
                type: String,
                default: "chart"
            },
            width: {
                type: String,
                default: "200px"
            },
            height: {
                type: String,
                default: "200px"
            },
            category: {
                type: String,
                default: "Human Rights"
            }
        },
        data() {
            return {
                chart: null,
                barData: {},
                lineData: {}
            };
        },
        computed: {
            ...mapState({
                currentCampainId: state => state.campaign.currentCampainId,
                currentCampainCategory: state => state.campaign.currentCampainCategory,
                canDraw: state => state.campaign.canDraw,
            }),
        },
        watch: {
            canDraw(val) {
                if (val) {
                    this.initChart()
                }
            }
        },
        mounted() {
            // $.get("http://localhost:8000/static/data/P1_progress_bars.json", {},
            //   (data, textStatus, jqXHR) => {
            //    this.barData = data['Animal Rights']
            //    console.error(this.barData)
            //     this.initChart();
            //   },
            //   "json"
            // );
            this.initChart()


        },
        beforeDestroy() {
            if (!this.chart) {
                return;
            }
            this.chart.dispose();
            this.chart = null;
        },
        methods: {
            async initChart() {
                var barData = await feature1BarJson();
                var lineData = await feature1LineJson();
                this.barData = barData[this.currentCampainCategory];
                this.lineData = lineData[this.currentCampainId];


                // var min = this.barData["min"];
                // var middle = this.barData["mean"];
                // var max = this.barData["max"];

                var min = []
                var middle = []
                var max = []
                var current = []

                console.log("translate")

                this.barData["min"].forEach((item, index) => {
                    min.push((item * 100).toFixed(1))
                })
                this.barData["mean"].forEach((item, index) => {
                    middle.push((item * 100).toFixed(1) - min[index])
                })
                this.barData["max"].forEach((item, index) => {
                    max.push((item * 100).toFixed(1) - middle[index])
                })

                this.lineData.forEach((item, index) => {
                    current.push((item * 100).toFixed(2))
                })

                console.log(min)

                this.chart = echarts.init(document.getElementById(this.id));


                var realData = current;


                var completeData = [];
                $.each(realData, function (index, item) {
                    completeData.push("-");
                });
                completeData.pop();
                completeData.push(realData[realData.length - 1]);

                if (realData.length < 20) {
                    let last_data = realData.pop();
                    let current = {
                        value: last_data,
                        symbol: "image://../../static/img/star.png",
                        symbolSize: 16
                    };
                    // realData.push(last_data)
                    realData.push(current);
                    if (last_data < 100) {
                        let splitLength = (100 - last_data) / (20 - realData.length);
                        var i = 1;
                        while (completeData.length < 20) {
                            completeData.push(last_data + i++ * splitLength).toFixed(2);
                        }
                    }
                } else {
                    let last_data = realData.pop();
                    let current = {
                        value: last_data,
                        symbol: "image://../../static/img/star.png",
                        symbolSize: 10
                    };
                    realData.push(last_data);
                }

                var projectData = realData;


                let option = {
                    /*  title: {
                                      x: 'center',
                                      // subtext: 'From ExcelHome',
                                      // sublink: 'http://e.weibo.com/1341556070/AjQH99che'
                                  },*/
                    grid: {
                        x: 50,
                        y: 20,
                        x2: 20,
                        y2: 50 //距离下边的距离
                    },
                    tooltip: {
                        trigger: "axis",
                        showDelay: 0,
                        position: [20, 20],
                        axisPointer: {
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                width: 1
                            }
                        },
                        // formatter: 'Number of Comments of the Current Campaign: {c0}<br />Average Number of Comments of Others: {c1}'
                        // formatter: '{a0}: {c0}% <br />{a1}: {c1}%<br />{a2}: {c2}%'
                        formatter: function (params) {
                            // var result = params[0].name;
                            var result = ""

                            var minData = 0;
                            var middleData = 0;
                            if (params.length == 3) {
                                minData = params[0].value
                                middleData = params[1].value
                            }else {
                                minData = params[2].value
                                middleData = params[3].value
                            }


                            params.forEach(function (item) {


                                if (item.seriesName != "marker") {
                                    if (item.data instanceof Object) {
                                        result +=
                                            item.seriesName + " : " + item.data.value + "%";
                                    } else {

                                        var data = 0;

                                        if (item.seriesName.indexOf("Average") != -1) {
                                            data = item.data + parseFloat(minData);
                                        } else if(item.seriesName.indexOf("Max") != -1){
                                            data = item.data + parseFloat(middleData);
                                        }else{
                                           data = item.data;
                                        }

                                        if (result.length > 0) {
                                            result += "<br/>" + item.seriesName + " : " + data + "%";
                                        } else {
                                            result += item.seriesName + " : " + data + "%";
                                        }
                                    }
                                }
                            });
                            return result;
                        }
                    },
                    legend: {
                        data: ["项目进度"]
                    },

                    calculable: true,
                    xAxis: [
                        {
                            type: "category",
                            boundaryGap: true,
                            // name: 'Percentile Timing',
                            data: [
                                "5%",
                                "10%",
                                "15%",
                                "20%",
                                "25%",
                                "30%",
                                "35%",
                                "40%",
                                "45%",
                                "50%",
                                "55%",
                                "60%",
                                "65%",
                                "70%",
                                "75%",
                                "80%",
                                "85%",
                                "90%",
                                "95%",
                                "100%"
                            ],
                            axisLabel: {
                                //设置x轴的字
                                /*show: true,
                                                  interval: 0,//使x轴横坐标全部显示
                                                  textStyle: {//x轴字体样式
                                                      color: "rgba(219,225,255,1)",
                                                      margin: 15
                                                  }*/
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: "value",
                            splitLine: false,
                            axisLabel: {
                                formatter: "{value}%"
                            },
                            min: 0
                            // name: 'Percentile Fundraising Progress'
                        }
                    ],
                    series: [
                        {
                            name: "Current Fundraising Progress: ",
                            type: "line",
                            symbol: "circle",
                            showSymbol: true,
                            showAllSymbol: true,
                            symbolSize: 8,
                            silent: true,
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        if (parseFloat(params.data) < parseFloat(middle[params.dataIndex])) {
                                            return "red";
                                        } else {
                                            return "green";
                                        }
                                    },
                                    lineStyle: {
                                        // 系列级个性化折线样式，横向渐变描边
                                        width: 2,
                                        color: "gray",
                                        shadowBlur: 10,
                                        shadowOffsetX: 8,
                                        shadowOffsetY: 8
                                    }
                                },
                                /* emphasis: {
                                     label: {show: true}
                                 }*/
                            },
                            data: projectData
                        },
                        {
                            name: "marker",
                            type: "line",
                            symbol: "star",
                            silent: true,
                            showSymbol: true,
                            itemStyle: {
                                normal: {
                                    color: "transparent",
                                    lineStyle: {
                                        // 系列级个性化折线样式，横向渐变描边
                                        width: 2,
                                        color: "gray",
                                        type: "dashed",
                                        shadowColor: "rgba(0,0,0,0.5)",
                                        shadowBlur: 10,
                                        shadowOffsetX: 8,
                                        shadowOffsetY: 8
                                    }
                                },
                                /*emphasis: {
                                    label: {show: false}
                                }*/
                            },
                            data: completeData
                        },
                        {
                            name: "Minimum Progress of Successful Similar Campaigns",
                            type: "bar",
                            stack: "总量",
                            itemStyle: {
                                normal: {
                                    // barBorderColor: 'rgba(0,0,0,0)',
                                    barBorderWidth: 0,
                                    color: "rgba(0,0,0,0)"
                                },
                                emphasis: {
                                    // barBorderColor: 'rgba(0,0,0,0)',
                                    color: "rgba(0,0,0,0)"
                                }
                            },
                            data: min
                        },
                        {
                            name: "Average Progress of Successful Similar Campaigns",
                            type: "bar",
                            stack: "总量",
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {offset: 1, color: "rgba(180,249,255, 0.5)"},
                                        {offset: 0, color: "rgba(1,25,147, 0.5)"}
                                    ])
                                },
                                /* emphasis: {
                                     label: {show: true}
                                 }*/
                            },
                            data: middle
                        },
                        {
                            name: "Maximum Progress of Successful Similar Campaigns",
                            type: "bar",
                            stack: "总量",
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {offset: 1, color: "rgba(1,25,147, 0.5)"},
                                        {offset: 0, color: "rgba(180,249,255, 0.5)"}
                                    ])
                                },
                                /*emphasis: {
                                    label: {show: true}
                                }*/
                            },
                            markLine: {
                                lineStyle: {
                                    normal: {
                                        type: 'dashed',
                                        color: 'black'
                                    }
                                },
                                silent: true,
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'left',
                                        formatter: '100%',
                                    },
                                },
                                data: [
                                    [
                                        {
                                            yAxis: 100,
                                            xAxis: 0,
                                            symbol: 'none'
                                        },
                                        {
                                            yAxis: 100,
                                            xAxis: '100%',
                                            symbol: 'none'
                                        }
                                    ]
                                ]
                            },
                            data: max
                        }
                    ]
                };

                this.chart.setOption(option);
            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .p1-container {
        width: 100%;
        h2 {
            text-align: center;
            margin-bottom: 26px;
        }

        .chart-container {
            display: flex;
            .legend {
                .single-item {
                    display: flex;
                    align-items: center;
                    i {
                        margin-right: 16px;
                        .custom-tip {
                            width: 32px;
                            height: 32px;
                            background: -moz-linear-gradient(top, #011993 0%, #b4f9ff 100%);
                            background: -webkit-gradient(
                                            linear,
                                            left top,
                                            left bottom,
                                            color-stop(0%, #000000),
                                            color-stop(100%, #b4f9ff)
                            );
                            background: -webkit-linear-gradient(top, #011993 0%, #b4f9ff 100%);
                            background: -o-linear-gradient(top, #011993 0%, #b4f9ff 100%);
                            background: -ms-linear-gradient(top, #011993 0%, #b4f9ff 100%);
                            background: linear-gradient(to bottom, #011993 0%, #b4f9ff 100%);
                        }
                    }
                    padding-top: 26px;
                }
            }
            .chart-div {
                position: relative;
                min-width: 600px;
                width: 100%;
                .x-label {
                    position: absolute;
                    bottom: 16px;
                    font-size: 12px;
                    right: 66px;
                }

                .y-label {
                    position: absolute;
                    top: 26px;
                    font-size: 12px;
                }
            }
        }
    }
</style>
